<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background: red;
    }
    .son1 {
      width: 100px;
      height: 100px;
      background: pink;
    }
    .son2 {
      width: 100px;
      height: 100px;
      background: green;
    }
    .scroll {
      width: 300px;
      height: 300px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="one($event), two()">submit</button>
    <!-- 事件修饰符 -->
    <!-- 阻止单击事件继续传播 -->
    <!-- <a @click.stop="diThis"></a> -->
    <!-- 提交事件不再重载页面 -->
    <!-- <form @submit.prevent="onSubmit"></form> -->
    <!-- 修饰符可以串联 -->
    <!-- <a @click.stop.prevent="doThat"></a> -->
    <!-- 只有修饰符 -->
    <!-- <form @submit.prevent></form> -->

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <!-- <div @click.capture="doThis"></div> -->

    <!-- 只有当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <!-- <div @click.self="doThat"></div> -->


    <div class="father" @click="clickFather">
      <!-- .stop 阻止事件继续传播 -->
      <!-- 点击 son1 只会触发 son1的事件 -->
      <div class="son1" @click.stop="clickSon1">11111</div>
      <!-- 默认点击 son2 会先触发 son2 事件 后触发 father 事件 -->
      <div class="son2" @click="clickSon2">22222</div>
    </div>

    <!-- .capture 会先触发内部元素，从里到外触发事件 -->
    <div class="father" @click.capture="clickFather">
      <!-- 点击 son1 会先触发 father 事件后触发 son1 的事件 -->
      <div class="son1" @click="clickSon1">11111</div>
      <!-- 点击 son2 会先触发 father 事件后触发 son2 的事件 -->
      <div class="son2" @click="clickSon2">22222</div>
    </div>

    <!-- .capture 会先触发内部元素，从里到外触发事件 -->
    <div class="father" @click.capture="clickFather">
      <!-- 点击 son1 会先触发 father 事件后触发 son1 的事件 -->
      <div class="son1" @click.capture="clickSon1">11111
        <!-- 点击 son2 会先触发 father 事件后触发 son1 的事件，最后触发 son2 事件 -->
        <!-- 如果 son1 不加 .capture 修饰符，事件执行顺序 father -> son2 -> son1 -->
        <div class="son2" @click="clickSon2">22222</div>
      </div>
    </div>

    <!-- .self 表示自己触发 -->
    <div class="father" @click.self="clickFather">
      <!-- 点击 son1 触发 son1 的事件 -->
      <div class="son1" @click="clickSon1">11111self</div>
      <!-- 点击 son2 触发一次 son2 的事件 -->
      <!-- .once 只触发一次 -->
      <div class="son2" @click.once="clickSon2">22222self</div>
    </div>

    <!-- 阻止默认事件的发生 -->
    <a href="http://www.baidu.com" @click.prevent>点击去百度</a>

    <div class="scroll" @scroll.passive="onScroll">
      <div style="width: 200px;height:600px;"></div>
    </div>

    <!-- .passive 不阻止事件的默认行为 -->
    <div class="father" @click.capture="clickFather">
      <div class="son1" @click.capture="clickSon1">11111
        <div class="son2" @click.capture="clickSon2">22222
          <a href="javascript:console.log('a标签被打印了')" @click.passive>点击这里</a>
        </div>
      </div>
    </div>

    <div style="width: 200px;height:200px;background:blue;" @click.exact="one"></div>
    <div style="width: 200px;height:200px;background:blue;" @click.ctrl.exact="one"></div>
  </div>

  <script>
    const app = Vue.createApp({
      setup() {

      },
      methods: {
        onScroll() {
          console.log('我滚动了')
        },
        one(event) {
          console.log(event)
          console.log('111')
        },
        two() {
          console.log('222')
        },
        clickFather() {
          console.log('点击了 father')
        },
        clickSon1() {
          console.log('点击了 son1')
        },
        clickSon2() {
          console.log('点击了 son2')
        }
      }
    })

    app.mount('#app')
  </script>
</body>
</html>